<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/mineBg.png" mode="aspectFill"></image>
		</view>
		<cusHeaderVue titleContent="我的物料" :showBack="true"></cusHeaderVue>
		<view :style="{height: `calc(${scrollerHeight} + 90rpx)`}">
			
		</view>
		<view class="headerBox">
			<view class="headerLi">
				<view class="headerNum">
					{{summaryData.waitApprove || 0}}
				</view>
				<view class="headerName">
					待审批
				</view>
			</view>
			<view class="headerLi">
				<view class="headerNum">
					{{summaryData.waitReceive || 0}}
				</view>
				<view class="headerName">
					待收货
				</view>
			</view>
			<view class="headerLi">
				<view class="headerNum">
					{{summaryData.waitDeliver || 0}}
				</view>
				<view class="headerName">
					待投放
				</view>
			</view>
			<view class="headerLi">
				<view class="headerNum">
					{{summaryData.delivered || 0}}
				</view>
				<view class="headerName">
					投放完毕
				</view>
			</view>
		</view>
		
		
		<scroll-view scroll-y="true"
			:style="{height: `calc(100vh - ${scrollerHeight} - 110rpx - 154rpx)`}"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing"
			refresher-background="transparent">
			<view class="contBox">
				<view v-if="materialsList.length === 0 && !isLoading" class="emptyBox">
					暂无物料数据
				</view>
				<view v-else-if="isLoading" class="loadingBox">
					加载中...
				</view>
				<view class="contLi" v-for="(item,index) in materialsList" :key="index" @click="toUrl(`/pages/mine/suppliesXq?id=${item.id}`)">
					<view class="contTop">
						<view class="contName">
							领取物品:{{item.materialName || ''}}
						</view>
						<view v-if="item.status === 0" class="contStatus">
							待审批
						</view>
						<view v-else-if="item.status === 1" class="contStatus contStatusOne">
							待收货
						</view>
						<view v-else-if="item.status === 2" class="contStatus contStatusTwo">
							待投放
						</view>
						<view v-else-if="item.status === 3" class="contStatus contStatusThree">
							投放完毕
						</view>
					</view>
					<view class="contTip">
						数量：<text>{{item.quantity || 0}}</text>
					</view>
					<view class="contTip">
						事由：<text>{{item.reasonStr || ''}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	import { GETMyMaterialsClaim } from '@/api/interface.js';
	
	const scrollerHeight = ref('');
	const materialsList = ref([]);
	const summaryData = ref({
		waitApprove: 0,
		waitReceive: 0,
		waitDeliver: 0,
		delivered: 0
	});
	const isLoading = ref(false);
	const isRefreshing = ref(false);

	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}
	
	// 获取物料数据
	const loadMaterialsData = async () => {
		try {
			isLoading.value = true;
			const res = await GETMyMaterialsClaim();
			if (res.code === 0 && res.data) {
				// 根据实际数据结构更新
				// 合并所有状态的物料数据
				const dspList = res.data.dsp || []; // 待审批
				const dshList = res.data.dsh || []; // 待收货
				const dtfList = res.data.dtf || []; // 待投放
				const tfwbList = res.data.tfwb || []; // 投放完毕
				
				// 更新统计数据
				summaryData.value = {
					waitApprove: dspList.length,
					waitReceive: dshList.length,
					waitDeliver: dtfList.length,
					delivered: tfwbList.length
				};
				
				// 更新列表数据，并转换字段名和状态
				materialsList.value = [
					...dspList.map(item => ({ ...item, status: 0, materialName: item.name, quantity: item.num, reasonStr: item.reasonStr || '' })),
					...dshList.map(item => ({ ...item, status: 1, materialName: item.name, quantity: item.num, reasonStr: item.reasonStr || '' })),
					...dtfList.map(item => ({ ...item, status: 2, materialName: item.name, quantity: item.num, reasonStr: item.reasonStr || '' })),
					...tfwbList.map(item => ({ ...item, status: 3, materialName: item.name, quantity: item.num, reasonStr: item.reasonStr || '' }))
				];
			} else {
				uni.showToast({
					title: res.message || '获取数据失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取物料数据失败:', error);
			uni.showToast({
				title: '网络异常，请稍后重试',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
			isRefreshing.value = false;
		}
	}
	
	// 下拉刷新开始
	const onPulling = () => {
		// 下拉时的视觉效果，可以添加一些提示文字
	}
	
	// 下拉刷新
	const onRefresh = () => {
		isRefreshing.value = true;
		// 添加短暂延迟以提供更好的用户体验
		setTimeout(() => {
			loadMaterialsData();
		}, 300);
	}
	
	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		})
	}
	onLoad(() => {
		getBarHeight();
		loadMaterialsData();
	})

	// 原生下拉刷新处理
	onPullDownRefresh(() => {
		// 调用现有的刷新逻辑
		isRefreshing.value = true;
		setTimeout(() => {
			loadMaterialsData();
			// 结束下拉刷新状态
			uni.stopPullDownRefresh();
		}, 300);
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		
		height: 100vh;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.headerBox{
		width: 706rpx;
		height: 154rpx;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		background: linear-gradient(-90deg, #feaf38,#f98434);
		box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
		// padding: 40rpx;
		// box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 六列，每列占 1 份 */
		  gap: 25rpx; /* 可选：列之间的间距 */
		  margin: 0 auto 20rpx;
		.headerLi{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.headerNum{
				font-size: 37.18rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			.headerName{
				font-size: 25.64rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			
		}
	}

	.contBox {
		padding: 0 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		.contLi{
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			box-shadow: 0 3.85rpx 13.46rpx 0 #b6b7b933;
			margin-bottom: 20rpx;
			padding: 37rpx 27rpx;
			
			box-sizing: border-box;
		}

		.contTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			margin-bottom: 20rpx;
			.contName{
				font-weight: 500;
				font-size: 33.33rpx;
				color: #1C2027;
			}
			.contStatus{
				border-radius: 7.69rpx 7.69rpx 7.69rpx 7.69rpx;
				background: #fbe8eb;
				font-size: 24.36rpx;
				font-weight: 400;
				color: #E53251;
				padding: 8rpx 11rpx;
				box-sizing: border-box;
			}
			.contStatusOne{
				background: #fff4d1;
				color: #F79816;
			}
			.contStatusTwo{
				background: #e0eeff;
				color: #3C8CE7;
			}
			.contStatusThree{
				background: #d3f5ec;
				color: #28B08A;
			}
		}
		.contTip{
			 color: #7f8494;
			 font-weight: 400;
			 font-size: 25.64rpx;
			 line-height: 48.72rpx;
			text{
				color: #262627;
			}
		}
		
		.emptyBox,
		.loadingBox {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 28rpx;
		}

	}
	
</style>